<template>
  <div style="position: relative">
    <el-tabs
      v-model="activeName3"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick3"
    >
      <el-tab-pane label="全部" name=""> </el-tab-pane>
      <el-tab-pane label="工商界" name="gsj"> </el-tab-pane>
      <el-tab-pane label="政治界" name="zzj"> </el-tab-pane>
      <el-tab-pane label="科研界" name="kjj"> </el-tab-pane>
      <el-tab-pane label="文艺界" name="wyj"> </el-tab-pane>
      <el-tab-pane label="教育界" name="jyj"> </el-tab-pane>
      <el-tab-pane label="体育界" name="tyj"> </el-tab-pane>
      <el-tab-pane label="其他" name="other"> </el-tab-pane>
    </el-tabs>
    <div class="acad-number">
      <span
        >杰出校友<span class="number-data">{{ totalnum }}</span
        >位</span
      >
    </div>
    <div
      class="academicianList"
      v-if="!isPersonInfo"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
    >
      <div
        class="fellow"
        v-for="(item, index) in peopleList"
        @click="personInfo(index, item)"
      >
        <ProcessedImage
          style="
            width: 100px;
            height: 120px;
            border-radius: 4px;
            margin-bottom: 10px;
          "
          :src="item.avatarUrl"
          params="imageView2/2/w/100/h/120"
        />
        <!-- <img
          style="
            width: 100px;
            height: 120px;
            border-radius: 4px;
            margin-bottom: 10px;
          "
          src="https://i5.youzy.cn/util4y/media/files/20240207/8b46bc7da0384b17ac98e85ebe6d1db4_何雅玲.jpg"
          alt=""
        /> -->
        <span>{{ item.name }}</span>
      </div>
      <div style="text-align: center; width: 100%" class="f14">
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">以上为全部</p>
      </div>
    </div>
    <div style="display: flex" v-else>
      <div class="left-panel">
        <div
          v-for="(item, index) in peopleList"
          :key="item.id"
          class="person"
          :class="{
            selected: selectedIndexN === index,
            hovered: hoveredIndex === index,
          }"
          @click="selectPerson(index, item)"
          @mouseenter="hoveredIndex = index"
          @mouseleave="hoveredIndex = null"
        >
          <ProcessedImage
            class="person-img"
            :src="item.avatarUrl"
            params="imageView2/2/w/65/h/70"
            :style="{
              width:
                selectedIndexN === index || hoveredIndex === index
                  ? '80px'
                  : '60px',
              height:
                selectedIndexN === index || hoveredIndex === index
                  ? '100px'
                  : '75px',
            }"
          />
          <!-- <img
            :src="person.img"
            alt="Person"
            class="person-img"
            :style="{
              width:
                selectedIndexN === index || hoveredIndex === index
                  ? '80px'
                  : '60px',
              height:
                selectedIndexN === index || hoveredIndex === index
                  ? '100px'
                  : '75px',
            }"
          /> -->
          <span
            :style="{
              filter:
                selectedIndexN === index
                  ? 'none'
                  : 'blur(0.1px)' /* 默认模糊，选中去除模糊 */,
            }"
            >{{ item.name }}</span
          >
        </div>
      </div>

      <!-- 右侧详情 -->
      <div class="right-panel">
        <div v-if="selectedIndexN !== null">
          <div style="display: flex">
            <ProcessedImage
              style="
                width: 70px;
                height: 100px;
                border-radius: 4px;
                margin-right: 14px;
              "
              :src="selectData.avatarUrl"
              params="imageView2/2/w/70/h/100"
            />
            <!-- <img
              style="
                width: 70px;
                height: 100px;
                border-radius: 4px;
                margin-right: 14px;
              "
              src="https://i5.youzy.cn/util4y/media/files/20240207/8b46bc7da0384b17ac98e85ebe6d1db4_何雅玲.jpg"
              alt=""
            /> -->
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
              "
            >
              <p
                style="
                  font-size: 18px;
                  margin-bottom: 8px;
                  color: var(--text-primary-color);
                  font-weight: 600;
                "
              >
                {{ selectData.name }}
              </p>
              <span style="font-size: 12px">{{ selectData.digest }}</span>
            </div>
          </div>
          <div class="person-detail">
            {{ selectData.introduction }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { xiaoyouApi } from '@/modules/InformationBase/api.js';
import { nextTick } from 'vue';

const { collegeCode } = defineProps({
  collegeCode: {
    type: String,
  },
});

const totalnum = ref(0);
const loading = ref(false);
const noMore = ref(false);
const disabled = ref(true);
const load = () => {
  params.value.page++;
  getXiaoyou();
};

const activeName3 = ref('');
const isPersonInfo = ref(false);
const peopleList = ref([]);
const hoveredIndex = ref(null); // 鼠标移入时的索引
const selectedIndexN = ref(0); // 默认选中第一个

const selectData = ref([]);
const selectPerson = (index, item) => {
  selectedIndexN.value = index;
  selectData.value = item;
  scrollToTop(index);
};
// 滚动名人列表
const scrollToTop = (index) => {
  const personList = document.querySelector('.left-panel');
  const targetPerson = personList.children[index];
  personList.scrollTop = targetPerson.offsetTop - 90;
};

const params = ref({
  search: '',
  page: 1,
  pageSize: 50,
  collegeCode,
});
const getXiaoyou = () => {
  loading.value = true;
  disabled.value = true;
  xiaoyouApi(params.value)
    .then((res) => {
      peopleList.value = [...peopleList.value, ...res.data.data];
      totalnum.value = res.data.total;
      if (peopleList.value.length == res.data.total) {
        noMore.value = true;
      } else {
        disabled.value = false;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
getXiaoyou();

const handleClick3 = (e) => {
  peopleList.value = [];
  noMore.value = false;
  params.value.page = 1;
  params.value.search = e.props.name;
  isPersonInfo.value = false;
  getXiaoyou();
};

const personInfo = (index, item) => {
  selectedIndexN.value = index;
  selectData.value = item;
  isPersonInfo.value = true;
  nextTick(() => {
    scrollToTop(index);
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  font-size: 12px;
}
.acad-number {
  font-size: 12px;
  line-height: 12px;
  color: var(--text-secondary-color);
  font-weight: 400;
  margin-bottom: 20px;
}
.number-data {
  font-weight: 500;
  color: var(--text-primary-color);
  margin: 0 2px;
}
.academicianList {
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.academician {
  width: 386px;
  height: 140px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  background: #f8f8f8;
  padding: 20px;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  align-items: center;
  cursor: pointer;
}
.academician:nth-child(3n) {
  margin-right: 0;
}
.introduce {
  margin-left: 14px;
  width: 70%;
  height: 72px;
}
.sciences {
  margin-left: 6px;
  height: 18px;
  padding: 4px;
  font-size: 10px;
  border-radius: 4px;
  text-align: center;
  color: #1c92e1;
  line-height: 9px;
  border: 1px solid #1c92e1;
}
.department {
  font-size: 12px;
  line-height: 20px;
  max-height: 40px;
  color: var(--text-primary-color);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.fellow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 30px 30px 0;
  position: relative;
}
.fellow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 120px;
  border-radius: 4px;
  background-color: rgba(115, 180, 253, 0.4); /* 半透明蓝色 */
  opacity: 0; /* 默认不可见 */
  transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}
.fellow:hover::after {
  opacity: 1; /* 鼠标悬停时显示蒙层 */
}
.left-panel {
  width: 10%;
  height: 480px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #ccc;
}
.right-panel {
  width: 90%;
  height: 480px;
  overflow-y: scroll;
  padding: 20px;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  cursor: pointer;
  position: relative;
}

.person-img {
  width: 65px;
  height: 70px;
  border-radius: 4px;
  transition:
    width 0.3s,
    height 0.3s,
    filter 0.3s;
}

.person.selected .person-img {
  border: 2px solid #0894f1; /* 选中的样式 */
}

.person:hover .person-img {
  width: 80px;
  height: 100px;
}

.person-img {
  filter: blur(0.1px); /* 默认模糊 */
}

.person.selected .person-img {
  filter: none; /* 选中的清晰 */
}

.person span {
  filter: blur(0.1px); /* 默认名字模糊 */
  transition: filter 0.3s ease; /* 添加过渡效果 */
}

.person.selected span {
  color: #464646;
  filter: none; /* 选中的名字清晰 */
}
.person-detail {
  width: 100%;
  background-color: #f8f8f8;
  padding: 20px;
  font-size: 16px;
  color: #262626;
  white-space: pre-wrap;
  margin-top: 20px;
  line-height: 30px;
}
</style>
